<template>
  <div class="yin-header">
    <!--图标-->
    <div class="header-logo" @click="goPage(RouterName.Home, NavName.Home)">
      <yin-icon :icon="iconList.ERJI"></yin-icon>
      <span>{{ musicName }}</span>
    </div>
    <yin-header-nav class="yin-header-nav" :styleList="headerNavList" :activeName="activeNavName" @click="goPage"></yin-header-nav>
    <!--搜索框-->
    <div class="header-search">
      <el-input placeholder="搜索" :prefix-icon="Search" v-model="keywords" @keyup.enter="goSearch()" />
    </div>
    <!--设置-->
    <yin-header-nav v-if="!token" :styleList="signList" :activeName="activeNavName" @click="goPage"></yin-header-nav>
    <el-dropdown class="user-wrap" v-if="token" trigger="click">
      <el-image class="user" fit="contain" :src="attachImageUrl(userPic)" />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(item, index) in menuList" :key="index" @click.stop="goMenuList(item.path)">{{ item.name }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useStore } from "vuex";
import YinIcon from "./YinIcon.vue";
import YinHeaderNav from "./YinHeaderNav.vue";
import mixin from "@/mixins/mixin";
import { HEADERNAVLIST, SIGNLIST, MENULIST, Icon, MUSICNAME, RouterName, NavName } from "@/enums";
import { HttpManager } from "@/api";
import {ElMessage} from 'element-plus'


const store = useStore();
const { changeIndex, routerManager } = mixin();

const attachImageUrl = (url: string) => {
  return HttpManager.attachImageUrl(url);
}

const musicName = ref(MUSICNAME);
const headerNavList = ref(HEADERNAVLIST); // 左侧导航栏
const signList = ref(SIGNLIST); // 右侧导航栏
const menuList = ref(MENULIST); // 用户下拉菜单项
const iconList = reactive({
  ERJI: Icon.ERJI,
});
const keywords = ref("");
const activeNavName = computed(() => store.getters.activeNavName);
const userPic = computed(() => store.getters.userPic);
const token = computed(() => store.getters.token);

function goPage(path, name) {
  if (!path && !name) {
    changeIndex(NavName.Home);
    routerManager(RouterName.Home, { path: RouterName.Home });
  } else {
    changeIndex(name);
    routerManager(path, { path });
  }
}

function goMenuList(path) {
  if (path == RouterName.SignOut) { 
    // proxy.$store.commit("setToken", false);
    store.commit("setToken", false);
    changeIndex(NavName.Home);
    routerManager(RouterName.Home, { path: RouterName.Home });

    // 删除token
    localStorage.removeItem('token');
  } else {
    routerManager(path, { path });
  }
}

function goSearch() {
  if (keywords.value !== "") {
    // proxy.$store.commit("setSearchWord", keywords.value); 
    store.commit("setSearchWord", keywords.value);
    routerManager(RouterName.Search, { path: RouterName.Search, query: { keywords: keywords.value } });
  } else {
    ElMessage({
      message: "搜索内容不能为空",
      type: "error",
    });
  }
}
</script>

<style lang="scss" scoped>
// 使用Sass 3.0新模块系统导入
@use "@/assets/css/var" as *;
@use "@/assets/css/global";

@media screen and (min-width: $sm) {
  .header-logo {
    margin: 0 1rem;
  }
}

@media screen and (max-width: $sm) {
  .header-logo {
    margin: 0 1rem;
    span {
      display: none;
    }
  }
  .header-search {
    display: none;
  }
}

.yin-header {
  position: fixed;
  width: 100%;
  height: $header-height;
  line-height: $header-height;
  padding: $header-padding;
  margin: $header-margin;
  background-color: $theme-header-color;
  box-shadow: $box-shadow;
  box-sizing: border-box;
  z-index: 100;
  display: flex;
  white-space: nowrap;
  flex-wrap: nowrap;
}

/* LOGO */
.header-logo {
  font-size: $font-size-logo;
  font-weight: bold;
  cursor: pointer;
  .icon {
    @include global.icon(1.9rem, $color-black);
    vertical-align: middle;
  }
  span {
    margin-left: 1rem;
  }
}

.yin-header-nav {
  flex: 1;
}

/*搜索输入框*/
.header-search {
  margin: 0 20px;
  width: 100%;
  :deep(input) {
    text-indent: 5px;
    max-width: $header-search-max-width;
    min-width: $header-search-min-width;
    border-radius: $header-search-radius;
    box-shadow: none;
    background-color: $color-light-grey;
    color: $color-black;
  }
}

/*用户*/
.user-wrap {
  position: relative;
  display: flex;
  align-items: center;

  .user {
    width: $header-user-width;
    height: $header-user-width;
    border-radius: $header-user-radius;
    margin-right: $header-user-margin;
    cursor: pointer;
  }
}
</style>
